<script setup> 
    import { Vue3SeamlessScroll } from "vue3-seamless-scroll"

    const props = defineProps({
        list: {
            type: Array,
            default: []
        }
    })

    let emit = defineEmits(['clickDetails'])

    const handleClick = (data) => {
        emit('clickDetails', data)
    }

</script>

<template>
    <div class="affair-open-warp card-box">
        <div class="card-title flex-between">
            <div class="flex-center">
                <img src="../../../assets/images/card-title-icon-sanwu.png">
                三务公开
            </div>
            <div class="details-text" @click="emit('clickDetails')">详情 ></div>
        </div>

        <vue3-seamless-scroll 
            :list="props.list" 
            class="list-wrap"
            hover
            wheel
            :singleHeight="36"
            :singleWaitTime="3000"
            :limitScrollNum="7"
        >
            <div 
                class="item flex" 
                v-for="(item, index) in props.list" 
                :key="index"
                @click="handleClick(item)"
            >
                <span class="index">{{ index + 1 }}</span>
                <span class="name">{{ item.openBy_dictText }}</span>
                <span class="title">{{ item.biaoti }}</span>
                <span class="date">{{ item.openTime }}</span>
            </div>
        </vue3-seamless-scroll>

    </div>

</template>

<style lang="less" scoped>
    .affair-open-warp{
        height: 325px;
        margin-top: 10px;

        .list-wrap{
            height: 265px;
            overflow: hidden;
            padding: 10px 20px;
            
            .item{
                padding: 10px 0;
                cursor: pointer;

                span{
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 16px;
                    color: #fff;
                }

                .index{
                    width: 30px;
                    text-align: center;
                }

                .name{
                    width: 100px;
                }

                .title{
                    flex: 1;
                    margin: 0 10px;
                }

                .date{
                    width: 100px;
                }
            }
        }
    }
</style>